iT邦幫忙

2023 iThome 鐵人賽
DAY 8
0
Modern Web

給前端新手的圖文故事系列 第 8 篇

轉變動畫與特效的歡樂工訪

15th鐵人賽
279 瀏覽

  • 分享至 

  • xImage
    •  

Transition(轉場)

CSS transition(轉場)能夠讓 CSS 屬性，從原有的數值變化到新值的過程中增添變化時間，這些被設定的元素，會具有從一個「狀態」轉變到另外一個「狀態」的過程。
通常這些變化會再如 hover 或是 active 等「狀態異動」的互動中產生，但當程式修改了部分的 class、id 或其他設置時，轉場的效果也會隨之觸發。

顏色轉場

通常我們在撰寫時會直接使用單行的寫法，這個寫法一次會涵蓋四個子項目。

簡單範例

/* 單行操作 */
transition: all 400ms ease-in 50ms;

/* 多行操作 */
transition-property: all;
transition-duration: 400ms;
transition-timing-function: ease-in;
transition-delay: 50ms;

轉場屬性 transition-property

設置轉場所需異動的屬性，all 將會代表全部，但因為效能考量，因此大多數情況會對指定參數進行指定，另外轉場效果只會做用於可以計算的數值，如 display: none 等將無法轉場。

transition-property: all;

播放時間 transition-duration

設置轉場的運作時間，單位可以使用任一時間單位，常見單位為「秒(s)與毫秒(ms)」

/* 單行操作 */
transition-duration: 0.4s;
transition-duration: 400ms;

轉場方式 transition-timing-function

設置轉場的運作方式(可以理解為動畫的加減數)，單位除了常見的關鍵字 「ease(平滑動畫)、ease-in(由慢到快)、ease-out(由快到慢)、ease-in-out(由慢到快再到慢)、linear(平均速度)」外，還有許多函示與任何的貝茲曲線可以設置。

基本參數

  • ease(平滑動畫)
  • ease-in(由慢到快)
  • ease-out(由快到慢)
  • ease-in-out(由慢到快再到慢)
  • linear(平均速度)

貝茲曲線參考：https://cubic-bezier.com/
運作方式參考：https://cssreference.io/property/transition-timing-function/

/* 關鍵字 */
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: linear;
transition-timing-function: step-start;
transition-timing-function: step-end;

/* 函數 */
/* steps 會將動畫拆分成逐格動畫 */
transition-timing-function: steps(4, end);
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-timing-function: frames(10);

/* 多個函數 */
transition-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* 全域值 */
transition-timing-function: inherit;
transition-timing-function: initial;
transition-timing-function: unset;

延遲時間 transition-delay

設置轉場的延遲時間，單位可以使用任一時間單位，常見單位為「秒(s)與毫秒(ms)」

transition-delay: 0.5s;
transition-delay: 500ms;

簡單應用範例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="assets/css/style.css" />
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;

        perspective: 500px;
      }

      div {
        padding: 5rem 10rem;
        border: 2px solid black;
        /* 轉場效果可以一次使用多個，不同的效果需用 , 隔開 */
        transition: transform 400ms steps(5, end),
          background-color 200ms ease 400ms;
        /* 變形的參數可以複合使用 */
        transform: rotateY(20deg) scale(0.9);
        /* 轉變方式由右邊開始 */
        transform-origin: right;
      }

      div:hover {
        background-color: aquamarine;
        /* 滑入的狀態在啟用後，會直接取代掉就有的轉變效果 */
        transform: translateY(5px);
      }
    </style>
  </head>
  <body>
    <div>BLOCK</div>
  </body>
</html>

Animation(動畫)

在上方的轉場效果中，我們可以將某個區塊元素在轉換「狀態」時，進行一定程度上的漸變與動畫效果，透過明確的「起始狀態」與「目標狀態」，轉場能自動地幫我們完成中間漸變的過程，但當我們的需求並不存在明確的「狀態變更」時，轉場效果就會相當難以負荷，明顯的範例是一些小 Icon 的生動效果，在為滑入抑或是異動樣式時，以轉場的形式非常難以完成，而這也是過往 flash 播放器會十分廣用的原因之一。

幸運的是，在 CSS3 中新增了 Animation(動畫) 的這一個屬性，他能夠具備相較於轉場效果更多的控制項目，並且提供了在傳統動畫設計上所具備的時間軸，使得我們在網頁動畫的設計上，有了更加方便的工具。

動畫在使用上與其他樣式不同的點，是在於它需要去訂一個名為 @keyframe 的影格操作，他就如同是傳統動畫的手翻書一樣，藉由繪製影格並播放的方式來實行動話的運作。

手翻書示意圖

通常我們在撰寫時會直接使用單行的寫法，這個寫法一次會涵蓋七個子項目。

簡單範例

影格配置設定

/* 使用關鍵字定義關鍵影格 */
@keyframes move_box {
  from {
    top: 0px;
    left: 0px;
  }

  to {
    top: 0px;
    left: 200px;
    background-color: yellow;
  }
}

/* 使用百分比定義關鍵影格 */
@keyframes move_box {
  0% {
    top: 0px;
    left: 0px;
  }

  100% {
    top: 0px;
    left: 200px;
    background-color: yellow;
  }
}

樣式設定

/* 單行操作 */
animation: move_box 1000ms ease-in 1s 1 normal backwards;

/* 多行操作 */
animation-name: move_box;
animation-duration: 1000ms;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: backwards;
animation-play-state: running;

實際上我們主要只需要操作動畫名稱與時間

動畫名稱(animation-name)

設置一個我們所設定 keyframes 的名稱，已完成動畫的連結。

animation-name: 動畫名稱;

動畫運作時間(animation-duration)

設置動畫的運作時間，單位可以使用任一時間單位，常見單位為「秒(s)與毫秒(ms)」

transition-duration: 0.4s;
transition-duration: 400ms;

動畫運作方式(animation-timing-function)

設置動畫的運作方式(可以理解為動畫的加減數)，單位除了常見的關鍵字 「ease(平滑動畫)、ease-in(由慢到快)、ease-out(由快到慢)、ease-in-out(由慢到快再到慢)、linear(平均速度)」外，還有許多函示與任何的貝茲曲線可以設置。

基本參數

  • ease(平滑動畫)
  • ease-in(由慢到快)
  • ease-out(由快到慢)
  • ease-in-out(由慢到快再到慢)
  • linear(平均速度)

貝茲曲線參考：https://cubic-bezier.com/
運作方式參考：https://cssreference.io/property/animation-timing-function/

/* 關鍵字 */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* 函數 */
/* steps 會將動畫拆分成逐格動畫 */
animation-timing-function: steps(4, end);
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: frames(10);

/* 多個函數 */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* 全域值 */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;

動畫延遲時間(animation-delay)

設置動畫的延遲時間，單位可以使用任一時間單位，常見單位為「秒(s)與毫秒(ms)」

animation-delay: 3s;
animation-delay: 3000ms;

動畫運動方向(animation-direction)

這個屬性可以控制動畫的運作方向，也可以設置來回反向播放。

/* 正常播放 */
animation-direction: normal;
/* 反向播放 */
animation-direction: reverse;
/* 來回正常播放 */
animation-direction: alternate;
/* 來回反向播放 */
animation-direction: alternate-reverse;

動畫的填滿模式(animation-fill-mode)

這個屬性將控制動畫在沒有播放時，區塊是否依然會依照動畫影像的設計顯示。

/* 預設值，不會有特殊作用 */
animation-fill-mode: none;
/* 在動畫週期結束之後，將會以最終的動畫狀態顯示 */
animation-fill-mode: forwards;
/* 在動畫週期結束之後，將會以最初的動畫狀態顯示 */
animation-fill-mode: backwards;
/* 在動畫週期結束之後，將會以最終的動畫狀態顯示 */
animation-fill-mode: both;

動畫的播放狀態(animation-play-state)

這個屬性可以控制動畫是播放還是暫停，可藉由控制狀態來產生異動。

/* 播放動畫 */
animation-play-state: running;
/* 暫停動畫 */
animation-play-state: paused;

/* Global values */
animation-play-state: inherited;
animation-play-state: initial;
animation-play-state: unset;

上一篇
學習 CSS 那些常用到的東西
下一篇
響應式網頁的基礎涵養與使用 Bootstrap 了解隔線
系列文
給前端新手的圖文故事 共 30 篇
  1. 26
    學習如何使用 TypeScript 在 React 專案
  2. 27
    了解 Next.js 的應用與基礎特性
  3. 28
    了解 Next.js 路由與相關應用
  4. 29
    使用 Redux 搭配 TypeScript 作為資料流載體
  5. 30
    前端系列總結
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23068 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙